<template>
	<div id="FolderPathManagement">
		<headers></headers>
		<!-- 头部 -->
		<header>
			<text class="cuIcon-back fo-48" @click="$pub.back"></text>
			<div class="header-txt" style=""><label>{{type=='文件夹管理' ?'文件夹管理':'选择上传的路径'}}</label></div>
			<div @click="onNewFolder">新建文件夹</div>
		</header>
		<!-- 面包屑 -->
		<crumbs :path="path" @freshFolder="freshFolder" @freshCurrentPath="freshCurrentUploadPath"></crumbs>
		<!-- 内容列表 -->
		<view class="list">
			<!-- 文件夹 -->
			<view class="list-item" v-for="(i, j) in FolderList_C" :key="j" @click="onNextFolder(i.path)">
				<view style="display: flex; align-items: center;">
					<image class="list-item-img" src="../../../static/img/home/NewFolder.png"></image>
					<view class="list-item-txt">
						<text>{{ i.path | FolderPathFormat }}</text>
						<!-- <text class="item-txt-time">2020.07.16</text> -->
					</view>
				</view>
			</view>
			<!-- 无文件状态 -->
			<view class="norecord" v-if="FolderList_C.length == 0">
				<image src="../../../static/img/file/noFIle.png"></image>
				<text class="fo-28 mt20">该文件夹下暂无文件目录</text>
			</view>
		</view>

		<!-- 底部栏 -->
		<footer v-if="type!='文件夹管理'">
			<u-button class="btns" shape="" @click="onCancel">取消</u-button>
			<u-button class="btns" shape="" type="primary" @click="onSubmit">
				<text>
					上传至（
					<span class='moreThenHide'>{{path.slice(-1)[0].text.slice(0,4)}}</span>
					<span v-if="path.slice(-1)[0].text.length>4">...</span>）
				</text>
			</u-button>
		</footer> <!-- 新建文件夹弹窗 -->
		<new-folder :isShow.sync="newFolderIsShow" @Ok="newFolderOk" @cancel="newFolderCancel"></new-folder>
		<!-- <van-popup v-model="van_popup" style="border-radius: 10px;overflow: hidden;padding: 10px;">
			<new-folder ref="NewFolder" @van_popup_cancel="van_popup_cancel" :path="path" @freshFolderAPI="freshFolderAPI"></new-folder>
		</van-popup> -->
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import headers from '../../../common/components/AppHeader/index.vue';
	import crumbs from '../../../common/components/UniCrumbs.vue';
	import newFolder from '../dialogs/newFolder/newFolder.vue';
	import {
		API$GetFolderList,
		API$UploadFile,
		API$SyncUploadFile,
		API$GetUploadRecordList
	} from '../../../common/API/file.js';
	import {API$NewFolder} from '../../../common/API/other.js';
	import DownLoad from '../../file/downLoad.js'
	export default {
		name: 'FolderPathManagement',
		components: {
			headers,
			crumbs,
			newFolder
		},
		data() {
			return {
				path: [{
					id: 1,
					text: '洋盘'
				}], // 传入面包屑的路径
				FolderList_C: [],
				currentUploadPath: '', //当前上传路径
				type: '', //别的页面带过来的参数，选择上传类型
				newFolderIsShow: false // 新建文件夹是否显示
			};
		},
		onLoad(opt) {
			this.type = opt.type;
		},
		onPullDownRefresh() {
			this.freshFolder();
		},
		computed: {
			...mapGetters(['File_Get_OssClient'])
		},
		async created() {
			await this.GetFolderList();
		},
		mounted() {},
		methods: {
			// 面包屑刷新API
			freshFolder(dir) {
				this.GetFolderList(dir);
			},
			// 文件夹联动
			onNextFolder(path) {
				let pathList = path.split('/');
				let RealyPath = ''; // 处理后传给后端的路径
				for (let i in pathList) {
					if (!pathList[i] || i == 0) continue;
					RealyPath += pathList[i] + '/';
				}
				// 路径处理
				this.GetFolderList(RealyPath);
				console.log('文件夹联动路径：', RealyPath);
				this.currentUploadPath = RealyPath;
			},
			// 显示新建文件夹弹窗
			onNewFolder() {
				this.newFolderIsShow = true;
			},
			// 新建文件夹弹窗确认回调
			newFolderOk(e) {
				console.log(this.currentUploadPath + e);
				this.NewFolder(this.currentUploadPath + e);
			},
			// 新建文件夹弹窗取消回调
			newFolderCancel() {},
			// 由面包屑返回路径
			freshCurrentUploadPath(e) {
				this.currentUploadPath = e;
			},
			onCancel() {
				uni.showTabBar({
					animation: true
				});
				this.$pub.back();
			},
			// 提交上传
			onSubmit() {
				let that = this;
				// 	console.log(this.type);
				if (this.type == '上传图片') {
					uni.chooseImage({
						count: 9, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						success: async(res)=> {
							// #ifdef H5
							DownLoad.RenderUpload_img(this,res,this.currentUploadPath)
							// #endif
							// #ifdef APP-PLUS
							DownLoad.PlusUpload_img(this,res,this.currentUploadPath)
							// #endif
						},
						fail: () => {
							this.$pub.Toast('您取消了上传操作');
						}
					});
				} else if (this.type == '上传视频') {
					uni.chooseVideo({
						count: 9,
						sourceType: ['camera', 'album'],
						success: async(res)=> {
							// #ifdef H5
							DownLoad.RenderUpload_video(this,res,this.currentUploadPath)
							// #endif
							// #ifdef APP-PLUS
							// DownLoad.RenderUpload_video(this,res,this.currentUploadPath)
							DownLoad.PlusUpload_video(this,res,this.currentUploadPath)
							
							// #endif
						},
						fail: () => {
							this.$pub.Toast('您取消了上传操作');
						}
					});
				} else if (this.type == '上传音乐') {
					uni.chooseVideo({
						count: 9,
						sourceType: ['camera', 'album'],
						success: async res => {
							// #ifdef H5
							DownLoad.RenderUpload_video(this,res,this.currentUploadPath)
							// #endif
							// #ifdef APP-PLUS
							DownLoad.RenderUpload_video(this,res,this.currentUploadPath)
							// #endif
						},
						fail: () => {
							this.$pub.Toast('您取消了上传操作');
						}
					});
				}
				uni.showTabBar({
					animation: true
				});
				console.log(this.currentUploadPath);
			},
			/*********************数据处理***********************************/
			// 注：  不带前缀的 如158920231/5465/asf   只能有5465/asf
			async GetFolderList(dir) {
				try {
					uni.showLoading({
						mask: true,
						title: '创建中'
					});
					let {
						result,
						path
					} = await API$GetFolderList({
						dir
					});

					// 处理面包屑的路径
					this.path = [{
						id: 1,
						text: '洋盘'
					}];
					let pathList = path.split('/');
					let RealyPath = ''; // 处理后传给面包屑的路径
					for (let i in pathList) {
						if (!pathList[i] || i == 0) continue;
						this.path.push({
							id: new Date().getTime(),
							text: pathList[i]
						});
					}
					// 处理文件夹数据
					this.FolderList = [];
					result.prefixes ?
						result.prefixes.forEach(i => {
							this.FolderList.push({
								checked: false,
								path: i
							});
						}) :
						'';
					this.FolderList_C = this.FolderList;
					// this.$pub.Toast('刷新成功~')
					uni.stopPullDownRefresh();
				} catch (e) {
					console.log(e);
				} finally {
					uni.hideLoading();
				}
			},
			async NewFolder(dir) {
				try {
					uni.showLoading({
						mask: true,
						title: '创建中'
					});
					let {
						code,
						msg
					} = await API$NewFolder({
						dir
					});
					if (code == 200) {
						this.$pub.Toast(msg);
						// 创建成功后要带入到那个路径去
						this.currentUploadPath = dir + '/'; //(dir)的路径已经是计算好的了
						this.GetFolderList(this.currentUploadPath);
					}
				} catch (e) {
					console.log(e);
				} finally {
					uni.hideLoading();
				}
			}
		}
	};
</script>

<style lang="less" scoped="scoped">
	#FolderPathManagement {
		header {
			padding: 10px;
			display: flex;
			width: 100%;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			height: 55px;
			// box-shadow: -2px 0px 8px 2px #a3a2a2;
			position: sticky;
			top: 0;
			background-color: #ffffff;
			z-index: 2;
		}

		.header-txt {
			font-size: 20px;
			font-weight: 600;
			display: flex;
			justify-content: center;
			position: absolute;
			left: calc(50%);
			transform: translate3d(-50%, 0, 0);
		}

		// 内容列表
		.list {
			display: flex;
			flex-direction: column;

			.list-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 40rpx;
				box-shadow: 0px 1px 0px #eaeaea;

				.list-item-img {
					height: 60rpx;
					width: 60rpx;
					margin-right: 30rpx;
				}

				.list-item-txt {
					display: flex;
					flex-direction: column;

					.item-txt-time {
						margin-top: 10rpx;
						color: gray;
						font-size: 20rpx;
					}
				}
			}
		}

		// 没有文件记录
		.norecord {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate3d(-50%, -50%, 0);
			width: 100%;

			image {
				height: 200rpx;
				width: 200rpx;
			}
		}

		footer {
			display: flex;
			width: 100%;
			height: 60px;
			justify-content: space-around;
			position: fixed;
			bottom: 0;
			background-color: #f0f0f0;
			padding: 8px;
			box-sizing: border-box;

			.btns {
				flex-basis: 46%;
			}
		}
	}

	.iconfont {
		font-size: 30px;
		line-height: 30px;
	}

	// 超出隐藏
	.moreThenHide {}
</style>
